import { createRouter, createWebHashHistory } from "vue-router";

// import Home from "../pages/home/Index.vue";
// import Detail from "../pages/detail/Index.vue";
// import City from "../pages/city/Index.vue";
// import NotFound from "../pages/notfound/Index.vue";

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      component: () => import("../pages/home/Index.vue"),
      children: [
        {
          path: "/home",
          redirect: "/home/movies",
        },
        {
          path: "/home/movies",
          component: () => import("../pages/home/movies/Index.vue"),
          children: [
            {
              path: "/home/movies",
              redirect: "/home/movies/hot",
            },
            {
              path: "hot",
              component: () => import("../pages/home/movies/hot/Index.vue"),
            },
            {
              path: "cinema",
              component: () => import("../pages/home/movies/cinema/Index.vue"),
            },
            {
              path: "wait",
              component: () => import("../pages/home/movies/wait/Index.vue"),
            },
            {
              path: "classic",
              component: () => import("../pages/home/movies/classic/Index.vue"),
            },
          ],
        },
        {
          path: "/home/videos",
          component: () => import("../pages/home/videos/Index.vue"),
          meta: {
            title: "猫眼视频",
          },
        },
        {
          path: "/home/mini",
          component: () => import("../pages/home/mini/Index.vue"),
          meta: {
            title: "猫眼小视频",
          },
        },
        {
          path: "/home/show",
          component: () => import("../pages/home/show/Index.vue"),
          // 路由元信息, 自己写任意东西
          meta: { requireLogin: true, title: "猫眼演出" },
        },
        {
          path: "/home/mine",
          component: () => import("../pages/home/mine/Index.vue"),
          meta: { requireLogin: true, title: "我的猫眼" },
        },
      ],
    },
    {
      path: "/detail/:id",
      component: () => import("../pages/detail/Index.vue"),
    },
    {
      path: "/city",
      component: () => import("../pages/city/Index.vue"),
      // 路由独享的守卫
      // 在指定的这个路由，要跳进去的时候调用
      // beforeEnter(to, from, next) {
      //   // console.log(to);
      //   if (localStorage.getItem("token")) {
      //     next();
      //   } else {
      //     next("/login");
      //   }
      // },
    },
    {
      path: "/login",
      component: () => import("../pages/login/Index.vue"),
    },
    // {
    //   path: "/about",
    //   component: () => import("../pages/about/Index.vue"),
    // },
    {
      path: "/:pathMatch(.*)*",
      component: () => import("../pages/notfound/Index.vue"),
    },
  ],
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // return { top: 0 };
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

// 添加全局前置守卫
// 只要路由发生了改变，那么这个函数就会执行
router.beforeEach((to, from, next) => {
  // console.log("to", to);
  // console.log("from", from);
  // to表示的是要去的那个页面的路由信息
  // from表示的是来的那个页面的路由信息

  // next() 表示放行
  // next(false) 表示不放行
  // next("/login") 表示让重定向到login页面

  // console.log(to.meta.title);

  // document.title = to.meta.title || "猫眼电影 - 娱乐看猫眼";

  // 路由鉴权
  // if (to.path === "/home/mine" || to.path === "/home/show") {
  if (to.meta.requireLogin) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }
  } else {
    next();
  }
});

// 添加全局解析守卫
// 执行的时机和语法跟全局前置守卫是一样的，会比beforeEach执行
// router.beforeResolve((to, from, next) => {})

// 全局的后置钩子
router.afterEach((to, from) => {
  document.title = to.meta.title || "猫眼电影 - 娱乐看猫眼";
});

export default router;
